<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatSubjectLinkComponent/>
    </div>
    <!-- 页面主体 -->
    <div class="main-container">
      <div class="main-wrap">
        <!-- 左侧主体 -->
        <div class="left-aside-container">
          <div class="left-aside-wrap">
            <!-- 左侧的文章列表 -->
            <ul class="article-list">
              <li v-for="item in articleList" :key="item.id">
                <div class="article-list-item">
                  <div class="left">
                    <el-image class="image" :src="item.coverUrl" :alt="item.title"></el-image>
                  </div>
                  <div class="right">
                    <h1 class="title"><a :href="'/article/details?id=' + item.id" v-text="item.title"></a></h1>
                    <p class="content" v-text="item.brief"></p>
                    <div>
                      <span class="up">顶 {{item.upCount}}</span>
                      <span class="down">踩 {{item.downCount}}</span>
                      <span class="date" v-text="item.gmtCreate"></span>
                    </div>
                    <div style="clear: both;"></div>
                  </div>
                </div>
                <el-divider/>
              </li>
            </ul>
            <div style="margin-top: 20px;" v-if="articleList.length < total">
              <el-button round type="success" class="btn-load-more" @click="loadMoreArticle">查看更多</el-button>
            </div>
          </div>
        </div>
        <!-- 右侧的列表 -->
        <div class="right-aside-container">
          <div class="right-aside-wrap">
            <!-- 搜索区域 -->
            <SearchComponent :defaultSearchKeywords="defaultSearchKeywords"/>
            <!-- 推荐列表 -->
            <RecommendListComponent :recommendList="recommendList"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloatSubjectLinkComponent from '@/components/FloatSubjectLinkComponentView.vue';
import SearchComponent from '@/components/SearchComponentView.vue';
import RecommendListComponent from '@/components/RecommendListComponentView.vue';
import ArticlesAPI from '@/http/apis/ArticlesAPI';
export default {
  components: {
    FloatSubjectLinkComponent,
    SearchComponent,
    RecommendListComponent
  },
  data() {
    return {
      currentCategory: {
        id: 3,
        name: '功效',
        url: '/gongxiao'
      },
      pageTitle: '',
      defaultSearchKeywords: '',
      recommendList: [],
      articleList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    loadPageTitle() {
      this.pageTitle = '茶叶的功效与作用 - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '枸杞菊花的功效与作用';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadRecommendList() {
      let recommendList = [
        {
          id: 1,
          title: '芦笋茶的功效与作用及禁忌',
          image: '/images/20200628_AB3B8B625CF5F8830103032C6A61D200.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 2,
          title: '生姜泡茶有什么功效',
          image: '/images/20191110_A824B9060FA75508CC356931C2615885.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 3,
          title: '茯苓冬瓜荷叶茶的功效',
          image: '/images/20200724_9A0F9805C24A3E713D6A318B2BE9CC41.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 4,
          title: '女生喝黑乌龙茶好吗',
          image: '/images/20210202_E6C32884ABB9396439D8A01CBD736C9A.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 5,
          title: '乌龙茶泡水的功效',
          image: '/images/20210204_C5F1EC356A967E8133EC28540062B29A.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 6,
          title: '玫瑰花茶功效',
          image: '/images/20200406_7D9A76D56EDB2111606B8CC4471279CF.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 7,
          title: '赤小豆苦荞薏仁茶的功效',
          image: '/images/20200620_309867D28A8B199D146B8A544C00B404.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 8,
          title: '茶叶发酵是什么意思',
          image: '/images/20190809_F3AA93CE30098895809B1D960C5EFBA6.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 9,
          title: '枣睡眠茶的功效与作用',
          image: '/images/7CB1F8608DE5BEFC11194251373BCF4F.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 10,
          title: '红茶与红枣泡水的功效与副作用',
          image: '/images/20201010_FBB27D9555B6ED53577C4CFDDFDCDE5D.jpg',
          link: '/article/details?id=9527'
        }
      ];
      this.recommendList = recommendList;
    },
    loadMoreArticle() {
      this.currentPage++;
      this.loadArticleList();
    },
    loadArticleList() {
      let jsonResult = {
        state: 20000,
        data: {
          pageSize: 5,
          total: 12,
          currentPage: 1,
          maxPage: 3,
          list: [
            {
              id: 24,
              authorId: 1,
              authorName: "root",
              categoryId: 2,
              categoryName: "攻效",
              title: "单丛蜜兰香介绍",
              brief: "蜜兰香是凤凰单丛十大花蜜香型珍贵名丛之一，是凤凰水仙群体中的杰出单株，属乌龙茶系列，产于广东省潮州市凤凰镇，它的母树距今已经有600多年历史了，它之所以叫做蜜兰香，是因为它的成茶具有浓烈的番薯蜜味，其茶蜜香高锐持久，芝兰香幽雅细长，滋味醇厚回甘，有“浓蜜幽兰”特韵，饮后满口生香，极耐冲泡",
              coverUrl: "images/01E48904F4CF61B68B8056BDF39F25ED.jpg",
              keywords: "[{\"id\":26, \"name\":\"经验\"}]",
              ip: "127.0.0.1",
              sort: 99,
              upCount: 0,
              downCount: 0,
              clickCount: 0,
              commentCount: 0,
              checkState: 1,
              isDisplay: 1,
              isRecommend: 0
            },
            {
              id: 21,
              authorId: 1,
              authorName: "root",
              categoryId: 2,
              categoryName: "攻效",
              title: "单丛蜜兰香介绍",
              brief: "蜜兰香是凤凰单丛十大花蜜香型珍贵名丛之一，是凤凰水仙群体中的杰出单株，属乌龙茶系列，产于广东省潮州市凤凰镇，它的母树距今已经有600多年历史了，它之所以叫做蜜兰香，是因为它的成茶具有浓烈的番薯蜜味，其茶蜜香高锐持久，芝兰香幽雅细长，滋味醇厚回甘，有“浓蜜幽兰”特韵，饮后满口生香，极耐冲泡",
              coverUrl: "images/01E48904F4CF61B68B8056BDF39F25ED.jpg",
              keywords: "[{\"id\":26, \"name\":\"经验\"}]",
              ip: "127.0.0.1",
              sort: 99,
              upCount: 0,
              downCount: 0,
              clickCount: 0,
              commentCount: 0,
              checkState: 1,
              isDisplay: 1,
              isRecommend: 0
            },
            {
              id: 22,
              authorId: 1,
              authorName: "root",
              categoryId: 2,
              categoryName: "攻效",
              title: "单丛蜜兰香介绍",
              brief: "蜜兰香是凤凰单丛十大花蜜香型珍贵名丛之一，是凤凰水仙群体中的杰出单株，属乌龙茶系列，产于广东省潮州市凤凰镇，它的母树距今已经有600多年历史了，它之所以叫做蜜兰香，是因为它的成茶具有浓烈的番薯蜜味，其茶蜜香高锐持久，芝兰香幽雅细长，滋味醇厚回甘，有“浓蜜幽兰”特韵，饮后满口生香，极耐冲泡",
              coverUrl: "images/01E48904F4CF61B68B8056BDF39F25ED.jpg",
              keywords: "[{\"id\":26, \"name\":\"经验\"}]",
              ip: "127.0.0.1",
              sort: 99,
              upCount: 0,
              downCount: 0,
              clickCount: 0,
              commentCount: 0,
              checkState: 1,
              isDisplay: 1,
              isRecommend: 0
            },
            {
              id: 11,
              authorId: 1,
              authorName: "root",
              categoryId: 2,
              categoryName: "攻效",
              title: "单丛蜜兰香介绍",
              brief: "蜜兰香是凤凰单丛十大花蜜香型珍贵名丛之一，是凤凰水仙群体中的杰出单株，属乌龙茶系列，产于广东省潮州市凤凰镇，它的母树距今已经有600多年历史了，它之所以叫做蜜兰香，是因为它的成茶具有浓烈的番薯蜜味，其茶蜜香高锐持久，芝兰香幽雅细长，滋味醇厚回甘，有“浓蜜幽兰”特韵，饮后满口生香，极耐冲泡",
              coverUrl: "images/01E48904F4CF61B68B8056BDF39F25ED.jpg",
              keywords: "[{\"id\":26, \"name\":\"经验\"}]",
              ip: "127.0.0.1",
              sort: 99,
              upCount: 0,
              downCount: 0,
              clickCount: 0,
              commentCount: 0,
              checkState: 1,
              isDisplay: 1,
              isRecommend: 0
            },
            {
              id: 19,
              authorId: 1,
              authorName: "root",
              categoryId: 2,
              categoryName: "攻效",
              title: "单丛蜜兰香介绍",
              brief: "蜜兰香是凤凰单丛十大花蜜香型珍贵名丛之一，是凤凰水仙群体中的杰出单株，属乌龙茶系列，产于广东省潮州市凤凰镇，它的母树距今已经有600多年历史了，它之所以叫做蜜兰香，是因为它的成茶具有浓烈的番薯蜜味，其茶蜜香高锐持久，芝兰香幽雅细长，滋味醇厚回甘，有“浓蜜幽兰”特韵，饮后满口生香，极耐冲泡",
              coverUrl: "images/01E48904F4CF61B68B8056BDF39F25ED.jpg",
              keywords: "[{\"id\":26, \"name\":\"经验\"}]",
              ip: "127.0.0.1",
              sort: 99,
              upCount: 0,
              downCount: 0,
              clickCount: 0,
              commentCount: 0,
              checkState: 1,
              isDisplay: 1,
              isRecommend: 0
            }
          ]
        }
      }
      this.articleList = this.articleList.concat(jsonResult.data.list);
      this.currentPage = jsonResult.data.currentPage;
      this.pageSize = jsonResult.data.pageSize;
      this.total = jsonResult.data.total;

    }
  },
  mounted() {
    this.loadPageTitle();
    this.loadDefaultSearchKeywords();
    this.loadArticleList();
    this.loadRecommendList();
  }
}
</script>

<style>
</style>